<template>
	<view>
		<!-- 顶部选项卡 -->
		<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap"></swiper-tab-head>

		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperHeight+'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items,index) in newsList" :key="index">
					<scroll-view scroll-y="true" class="list">
						<block v-for="(item,index1) in items.list" :key="index1">
							<index-list :item="item" :index="index1"></index-list>
						</block>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import indexList from '../../components/index/index-list.vue'
	import swiperTabHead from '../../components/index/swiper-tab-head.vue'
	
	export default {
		components: {
			indexList,
			swiperTabHead
		},
		data() {
			return {
				swiperHeight: 500,
				tabIndex: 0,
				tabBars: [{
						name: "推荐",
						id: "tuijian"
					},
					{
						name: "关注",
						id: "guanzhu"
					},
					{
						name: "体育",
						id: "tiyu"
					},
					{
						name: "热点",
						id: "redian"
					},
					{
						name: "财经",
						id: "caijing"
					},
					{
						name: "娱乐",
						id: "yule"
					}
				],
				newsList: [{
						list: [{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: false,
								title: "东哲和阳阳",
								type: "img", //img:图文 video:视频
								image: "../../static/bgimg/son.jpg",
								infonum: {
									flag: 1, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							},
							{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: true,
								title: "东哲和阳阳",
								type: "video", //img:图文 video:视频
								image: "../../static/bgimg/son.jpg",
								playnum: "20w",
								videotime: "2:47",
								infonum: {
									flag: 2, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							}
						]
					},
					{
						list: [{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: false,
								title: "东哲和阳阳",
								type: "img", //img:图文 video:视频
								image: "../../static/bgimg/1.jpg",
								infonum: {
									flag: 1, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							},
							{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: true,
								title: "东哲和阳阳",
								type: "video", //img:图文 video:视频
								image: "../../static/bgimg/son.jpg",
								playnum: "20w",
								videotime: "2:47",
								infonum: {
									flag: 2, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							},
							{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: false,
								title: "东哲和阳阳",
								type: "img", //img:图文 video:视频
								image: "../../static/bgimg/son.jpg",
								infonum: {
									flag: 1, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							},
							{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: true,
								title: "东哲和阳阳",
								type: "video", //img:图文 video:视频
								image: "../../static/bgimg/son.jpg",
								playnum: "20w",
								videotime: "2:47",
								infonum: {
									flag: 2, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							}
						]
					},
					{
						list: [{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: false,
								title: "东哲和阳阳",
								type: "img", //img:图文 video:视频
								image: "../../static/bgimg/2.jpg",
								infonum: {
									flag: 1, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							},
							{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: true,
								title: "东哲和阳阳",
								type: "video", //img:图文 video:视频
								image: "../../static/bgimg/son.jpg",
								playnum: "20w",
								videotime: "2:47",
								infonum: {
									flag: 2, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							},
							{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: false,
								title: "东哲和阳阳",
								type: "img", //img:图文 video:视频
								image: "../../static/bgimg/son.jpg",
								infonum: {
									flag: 1, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							},
							{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: true,
								title: "东哲和阳阳",
								type: "video", //img:图文 video:视频
								image: "../../static/bgimg/son.jpg",
								playnum: "20w",
								videotime: "2:47",
								infonum: {
									flag: 2, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							},
							{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: false,
								title: "东哲和阳阳",
								type: "img", //img:图文 video:视频
								image: "../../static/bgimg/son.jpg",
								infonum: {
									flag: 1, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							},
							{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: true,
								title: "东哲和阳阳",
								type: "video", //img:图文 video:视频
								image: "../../static/bgimg/son.jpg",
								playnum: "20w",
								videotime: "2:47",
								infonum: {
									flag: 2, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							}
						]
					},
					{
						list: [{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: false,
								title: "东哲和阳阳",
								type: "img", //img:图文 video:视频
								image: "../../static/bgimg/3.jpg",
								infonum: {
									flag: 1, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							},
							{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: true,
								title: "东哲和阳阳",
								type: "video", //img:图文 video:视频
								image: "../../static/bgimg/son.jpg",
								playnum: "20w",
								videotime: "2:47",
								infonum: {
									flag: 2, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							}
						]
					},
					{
						list: [{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: false,
								title: "东哲和阳阳",
								type: "img", //img:图文 video:视频
								image: "../../static/bgimg/son.jpg",
								infonum: {
									flag: 1, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							},
							{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: true,
								title: "东哲和阳阳",
								type: "video", //img:图文 video:视频
								image: "../../static/bgimg/4.jpg",
								playnum: "20w",
								videotime: "2:47",
								infonum: {
									flag: 2, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							}
						]
					},
					{
						list: [{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: false,
								title: "东哲和阳阳",
								type: "img", //img:图文 video:视频
								image: "../../static/bgimg/son.jpg",
								infonum: {
									flag: 1, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							},
							{
								avatar: "../../static/logo.jpg",
								username: "花落知多少",
								isfollow: true,
								title: "东哲和阳阳",
								type: "video", //img:图文 video:视频
								image: "../../static/bgimg/son.jpg",
								playnum: "20w",
								videotime: "2:47",
								infonum: {
									flag: 2, //0:没有操作 1:已赞 2:已踩
									praisenum: 20,
									unpraisenum: 2
								},
								commentnum: 50,
								sharenum: 1000
							}
						]
					}
				]

			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					/* 设置swiper的高度 */
					this.swiperHeight = res.screenHeight - uni.upx2px(100) /* 可用高度 - 顶部选项卡高度*/
				}
			});
		},
		methods: {
			//tabbar点击事件
			tabtap(index){
				this.tabIndex=index
			},
			//滑动事件
			tabChange(e) {
				// console.log(JSON.stringify(e.detail))
				// 左右滑动页面,使顶部选项跟随变化
				this.tabIndex = e.detail.current
			}
		}
	}
</script>

<style>
</style>
